<template>
  <div class="container">
    <!-- 头部 -->
    <div class="header">
      <div class="toHome" @click="toHome">
        <van-icon name="wap-home-o" />
      </div>
      <div class="wyyx">网易严选</div>
      <div class="toSearch">
        <van-icon name="search" @click="toSearch" />
      </div>
      <div class="toBuy" @click="toCart">
        <van-icon name="shopping-cart-o" />
      </div>
    </div>
    <!-- logo大图 -->
    <div class="bigLogo">
      <img class="bigImg" src="https://yanxuan.nosdn.127.net/static-union/164793255107785e.png" alt="" />
    </div>

    <!--  账号密码输入框 -->
    <van-form @submit="onSubmit">
      <van-cell-group inset>
        <!-- 输入任意文本 -->
        <van-field
          label="账号"
          v-model="phone"
          placeholder="请输入账号"
          colon
          :clearable="true"
          :rules="[
            { required: true, message: '请填写用户账号' },
            { pattern: phoneReg, message: '账号格式错误，应为手机号,' }
          ]"
        />
        <!-- 输入密码 -->
        <van-field
          type="password"
          v-model="password"
          label="密码"
          placeholder="请输入密码"
          colon
          :clearable="true"
          :rules="[
            { required: true, message: '请填写密码' },
            { pattern: pwdReg, message: '密码为6到21位英文、数字、下划线!' }
          ]"
        />
      </van-cell-group>
      <!-- 点击登录 -->
      <div style="margin: 16px">
        <van-button round block type="danger" native-type="submit">
          <van-icon name="idcard" class="icon" style="margin-right: 10px" />点击登录
        </van-button>
      </div>
      <van-dialog v-model:showDialog="showDialog" show-cancel-button>
        <img src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-3.jpeg" />
      </van-dialog>
    </van-form>
    <!-- 注册按钮 -->
    <div class="reg" @click="toRegister">点击注册账号 ></div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { nextTick } from 'vue'

export default defineComponent({
  name: 'Login'
})
</script>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import { ref } from 'vue'
import { phoneReg, pwdReg } from '@/utils/server'
import { useCategoryStore } from '@/stores/modules/center'
import { showDialog } from 'vant'
import pinia from '@/stores'

const router = useRouter()
//初始化仓库
const userInfoStore = useCategoryStore(pinia)
// 定义账号
const phone = ref('')
// 定义密码
const password = ref('')

// 登陆按钮请求
const onSubmit = async () => {
  // 发送登录请求
  await userInfoStore.getLogin(phone.value, password.value)
  nextTick(() => {
    if (localStorage.getItem('token_key')) {
      router.push('/center')
    }
  })
}
// 去注册页面
const toRegister = () => {
  router.push('/register')
}

// 去主页
const toHome = () => {
  router.push('/home')
}
// 去购物车
const toCart = () => {
  router.push('/shopCart')
}
// 去搜索
const toSearch = () => {
  router.push('/search')
}
</script>

<style scoped lang="less">
.container {
  height: 100vh;
  background-color: #f2f5f4;
  .header {
    height: 44px;
    background-color: #fafafa;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgb(229, 229, 229);
    box-sizing: border-box;
    .toHome {
      width: 24px;
      height: 24px;
      margin: 0 15px;
    }
    .wyyx {
      height: 27px;
      line-height: 27px;
      text-align: center;
      font-size: 20px;
      margin: 0 auto;
      font-weight: 999;
    }
    .toBuy {
      margin: 0 15px;
    }
  }
  .bigLogo {
    margin: auto;
    margin-top: 80px;
    margin-bottom: 50px;
    width: 134px;
    height: 45px;
    .bigImg {
      width: 100%;
      height: 100%;
    }
  }
  .reg {
    width: 100px;
    text-align: center;
    font-size: 14px;
    margin: auto;
    margin-top: 50px;
  }
}
</style>
